<template>
  <div class="mgtIdNumber">
    <x-header v-show="!isWeChar">
      <div slot="default" class="common__header--title">{{pageTitle}}</div>
      <div @click="goBack" slot="overwrite-left"><img slot="icon" src="~assets/x3/ico/goback1.png" class="go-back"></div>
    </x-header>
    <!-- 已实名 -->
    <div class="mgtIdNumber_realName" v-if="realName">
      <div>
        <span>{{user.userDto.userName | filter_uname}}</span>
        <img alt="" src="~assets/x3/ico/isRealName.png" width="45">
      </div>
      <div>{{user.userDto.idNumber | filter_idNumber}}</div>
    </div>
    <!-- 实名无效 -->
    <div v-if="!realName" class="mgtIdNumber_inputDiv">
      <x-input type="tel" :value="user.userDto.mobile | filter_mobile" :max="StrLenth.mobile" text-align="right" readonly>
        <span slot="label">手机号码</span>
      </x-input>
      <p>
        <icon type="warn"></icon>
        请填写真实信息，实名成功后将不能修改！
      </p>
      <x-input v-model="userName" :min="StrLenth.userNameMin" :max="StrLenth.userNameMax" placeholder="请输入真实姓名">
        <img slot="label" style="padding-right:10px;display:block;" src="~assets/x3/ico/icon-name.png" width="18">
      </x-input>
      <x-input v-model="idNumber" :min="StrLenth.idNumberMin" :max="StrLenth.idNumberMax" placeholder="请输入身份证号码">
        <img slot="label" style="padding-right:10px;display:block;" src="~assets/x3/ico/icon-card.png" width="18">
      </x-input>
      <x-input v-if="haveImgCode" v-model="imgCode" :max="StrLenth.img" placeholder="请输入图形验证码">
        <img slot="label" style="padding-right:10px;padding-top:5px;display:block;" src="~assets/x3/ico/ico-input-img_code.png" width="18">
        <span slot="right" class="img__code--change" @click="changeImgCode()">换一张</span>
        <img slot="right" class="img__code" :src="imgCodeSrc" @click="changeImgCode()">
      </x-input>
      <x-input type="tel" :max="StrLenth.sms" v-model="mobileCode" placeholder="请输入短信验证码">
        <img slot="label" style="padding-right:10px;padding-top:5px;display:block;" src="~assets/x3/ico/ico-input-Mcode.png" width="18">
        <x-button action-type="button" slot="right" mini class="linkMobileCode" @click.native="sendSmsCode" :text="sendBtnText" :disabled="isSendOk"></x-button>
      </x-input>
    </div>
    <!-- 协议勾选 -->
    <div v-if="!realName" class="row_protocol">
      <span @click="confirmItem">
        <img v-show="isCheck" class="insure__img" src="~assets/x3/ico/check.png">
        <img v-show="!isCheck" class="insure__img" src="~assets/x3/ico/check_un.png">
      </span>
      <span>
        <span @click="confirmItem">已阅读并同意</span>
        <a href="JavaScript:void(0);" @click="clauseRead('statement')">《用户协议》</a>
      </span>
    </div>
    <!-- 显示协议的弹窗 -->
    <x-dialog v-model="showClauseRead" class="dialog-Einv" hide-on-blur>
      <div style="padding:10px">
        <div class="insure__clauseRead" style="overflow-y: overlay;">
          <p align="left" v-html="readText"></p>
        </div>
      </div>
      <div>
        <x-button style="width: 100px !important;" @click.native="showClauseRead=false" mini type="primary">确认</x-button>
        <!-- <x-button mini>取消</x-button> -->
      </div>
    </x-dialog>

    <x-button v-if="!realName" text="确认" @click.native="processForm" type="primary" class="mgtIdNumber_process_btn"></x-button>
    <!-- 提示信息 -->
    <toast v-model="showToast" type="warn" width="19em">{{showToastText}}</toast>
  </div>
</template>
<script>
import { XHeader, XInput, XButton, Badge, Alert, AlertPlugin, Confirm, Toast, XDialog, Icon } from "vux";
import { RouteUrl, Mutations, StrLenth } from "src/common/const";
import Validation from "src/common/util/validation";
import { RequestUrl } from "src/common/url";
import { mapState } from "vuex";

export default {
  components: { XHeader, XInput, XButton, Badge, Alert, AlertPlugin, Confirm, Toast, XDialog, Icon },
  computed: mapState(["user", "isWeChar", "clauseStore"]),
  data() {
    return {
      StrLenth: {}, //字符长度常量
      pageTitle: "实名认证",//页面标题名称
      showToastText: "", //提示信息
      showToast: false, //是否提示
      realName: false,//false=实名无效
      userName: "", //真实姓名
      idNumber: "", //身份证号
      mobileCode: "", //验证码
      isSendOk: false, //发送按钮是否禁用
      sendBtnText: "获取验证码", //发送按钮文本内容
      imgCodeSrc: RequestUrl.GET_VALIDATE_CODE, //验证码图片路径
      imgCode: "", //图形码
      haveImgCode: true, //是否需要图形码,false=因为默认为密码登录因此需要,动态码登录第一次不需要
      isCheck: false,//是否已勾选协议
      showClauseRead: false,
      readText: "",
    };
  },
  filters: {
    filter_uname(val) {
      if (typeof (val) != 'undefined' && val != null && val.length > StrLenth.userNameMax) {
        return val.substring(0, StrLenth.userNameMax) + "...";
      }
      return val;
    },
    filter_mobile(mobile) {
      if (Validation.isErrPhone11(mobile)) {
        return "*****";
      }
      return mobile.substring(0, 3) + "*****" + mobile.substring(mobile.length - 3, mobile.length);;
    },
    filter_idNumber(idNumber) {
      // if (!Validation.isIdNumber(idNumber)) {
      //   return "**********";
      // }
      if (typeof (idNumber) != 'undefined' && idNumber != null && idNumber.length > 8) {
        return idNumber.substring(0, 5) + "**********" + idNumber.substring(idNumber.length - 3, idNumber.length);
      }
      return idNumber;
    }
  },
  watch: {
    showClauseRead(cur, old) {
      if (cur) {
        $("body").css("overflow-y", "hidden");
      } else {
        $("body").css("overflow-y", "auto");
      }
    },
  },
  methods: {
    //返回
    goBack() {
      this.$common.goBackUrl(this, RouteUrl.ACCOUNT);
    },
    changeImgCode() {
      this.imgCodeSrc = RequestUrl.GET_VALIDATE_CODE + "?a=" + Math.random();
    },
    // 发送验证码
    sendSmsCode() {
      /**
       * 发送验证码,返回data.msg=信息,data.state=0表示成功
       * isSendOk,true=禁用(disabled=true)
       * sendBtnText,验证码按钮文本显示内容
       */
      let imgcode = null;
      if (this.haveImgCode) {
        //需要图形码时传递参数
        imgcode = this.imgCode;
        //校验-图形码
        let msg = Validation.isImgCode(imgcode);
        if (msg != null) {
          this.showToastText = msg; this.showToast = true; return;
        }
      }
      this.$common.sendSMS(this, this.user.userDto.mobile, imgcode, this.isSendOk, this.pageTitle);
    },
    //协议勾选
    confirmItem() {
      this.isCheck = !this.isCheck;
    },
    //协议展示
    clauseRead(type) {
      let query = {
        _this: this,
        TYPE: "FORM",
        planId: "registerUserProtocol",
        clauseTitle: "恒华出行宝注册用户协议"
      }
      this.$common.storeCommit(this, Mutations.CUR_CLAUSE_TITLE_ONE, query);
      this.showClauseRead = true;
    },

    //提交
    processForm() {
      //默认请求无验证码接口
      let postUrl = RequestUrl.UPDATE_ID_NUMBER_BY_MOBILE;
      // if (this.realName) {
      //   //解绑证件号
      //   postUrl = RequestUrl.UNBIND_ID_NUMBER_BY_MOBILE;
      // }
      let initData = {
        TYPE: "FORM",
        userCode: this.user.userDto.userCode,
        mobile: this.user.userDto.mobile,
        userName: this.userName,
        idNumber: this.idNumber,
        mobileCode: this.mobileCode
      };
      //已勾选协议
      if (!this.isCheck) {
        this.showToastText = "请勾选协议"; this.showToast = true; return;
      }
      //校验-手机号
      let msg = Validation.isPhone11(initData.mobile);
      if (msg != null) {
        this.showToastText = msg; this.showToast = true; return;
      }
      //校验-姓名
      msg = Validation.isUserName(initData.userName);
      if (msg != null) {
        this.showToastText = msg; this.showToast = true; return;
      }
      //校验-身份证号码
      if (Validation.isEmpty(initData.idNumber)) {
        this.showToastText = "请输入身份证号码"; this.showToast = true; return;
      }
      if (!Validation.isIdNumber(initData.idNumber)) {
        this.showToastText = "请输入有效的身份证号码"; this.showToast = true; return;
      }
      if (this.haveImgCode) {
        //图形码
        postUrl = RequestUrl.UPDATE_ID_NUMBER_BY_MOBILE_IMG;
        // if (this.realName) {
        //   //解绑证件号
        //   postUrl = RequestUrl.UNBIND_ID_NUMBER_BY_MOBILE_IMG;
        // }
        initData.imgCode = this.imgCode;
        //校验-图形码
        msg = Validation.isImgCode(initData.imgCode);
        if (msg != null) {
          this.showToastText = msg; this.showToast = true; return;
        }
      }
      //校验-手机验证码
      msg = Validation.isSmsCode(initData.mobileCode);
      if (msg != null) {
        this.showToastText = msg; this.showToast = true; return;
      }
      let _this = this;
      //提交密码操作
      _this.$common.storeCommit(_this, Mutations.UPDATE_LOADING_STATUS, true);
      _this.$http.post(postUrl, initData).then(function (res) {
        _this.$common.storeCommit(_this, Mutations.UPDATE_LOADING_STATUS, false);
        if (res.state != 0) {
          if (res.result == "图形码过期" || res.result == "图形码错误") {
            _this.changeImgCode();//更换图形验证码
          }
          // _this.haveImgCode = true; //第一次未启用时，启用图形验证码
          _this.showToastText = res.result;
          _this.showToast = true;
          return;
        }
        //保存USER_INFO信息
        _this.$common.storeCommit(_this, Mutations.SAVE_USER_INFO, res.result);
        let data = {
          _this: _this,
          msgData: {
            headerTitle: "信息提示",
            gaBackUrl: RouteUrl.ACCOUNT,
            buttonUrl: RouteUrl.ACCOUNT,
            title: "实名成功",
            description: "",
            buttonsType: "primary",
            buttonsText: "返回账户",
          }
        }
        _this.$common.storeCommit(_this, Mutations.SET_MSG_DATA, data);
      });
    },
    //初始化当前页面信息
    initPage() {
      //清除验证码倒计时
      this.$common.clearTimeOutForSms();
      if (this.user.isLogin) {
        if (Validation.isErrPhone11(this.user.userDto.mobile)) {
          //手机号无效是请先绑定手机号
          this.$common.goUrl(this, RouteUrl.MGT_MOBILE);
        }

        //证件类型：1身份证，2社会信用代码
        if (Validation.isRealName(this.user.userDto.userName, this.user.userDto.idNumber, this.user.userDto.idType)) {
          this.realName = true;//已实名
          return;
        }
      } else {
        this.$common.goUrl(this, RouteUrl.LOGIN);
      }
    }
  },
  beforeRouteEnter(to, from, next) {
    sessionStorage["MGT_ID_NUMBER_FORM_URL"] = from.path;//刷新时的地址
    next();
  },
  beforeMount() {
    if (sessionStorage["MGT_ID_NUMBER_FORM_URL"] == "/") {//刷新时返回列表页
      this.$common.goUrl(this, RouteUrl.ACCOUNT);
      return;
    }
  },
  mounted() {
    this.StrLenth = StrLenth; //字符长度常量
    this.$init.subPageInit(this);
    //初始化当前页面信息
    this.initPage();
    document.title = this.pageTitle;
  }
};
</script>
<style lang="scss" scoped>
.mgtIdNumber_realName {
  margin: 15px auto;
  width: 95%;
  height: 130px;
  border-radius: 5px;
  background-color: white;
  text-align: center;
  font-size: 20px;
  padding: 20px 0px;
  div {
    height: 60px;
    line-height: 60px;
  }
}
//input区域
.mgtIdNumber_inputDiv {
  margin: 15px auto;
  width: 95%;
  height: auto;
  border-radius: 5px;
  background-color: white;
  p {
    padding-left: 10px;
    font-size: 14px;
    color: red;
    height: 40px;
    line-height: 50px;
    .weui-icon-warn {
      font-size: 14px;
    }
  }
  span {
    font-size: 14px;
  }
  .weui-cell {
    border-bottom: 1px solid #efefef;
  }
  .weui-cell:before {
    border-top: 0px;
  }
}
//协议
.row_protocol {
  margin: 15px auto;
  width: 95%;
  font-size: 14px;
  img {
    width: 14px;
    height: auto;
    float: left;
    margin: 4px 5px 0px 16px;
  }
  span {
    line-height: 18px;
    color: #b1b1b1;
  }
  a {
    color: #C8161D;
    text-decoration: none;
  }
}
.insure__clauseRead {
  border-color: aliceblue;
  white-space: pre-wrap;
  vertical-align: top;
  width: 100%;
  font-size: 15px;
  height: 75vh;
  font-family: Microsoft YaHei;
  overflow-y: scroll; // border: 1px solid #f3f3f3;
  font: 400 14.3333px Arial;
}
.dialog-Einv {
  // padding: 15px !important;
  .weui-dialog {
    max-width: 90% !important;
  }
}

//图形码
.img__code {
  width: 80px;
  height: 31px;
  margin-left: 3px;
  vertical-align: middle;
}

//换一张图形码
.img__code--change {
  margin-left: 3px;
  vertical-align: middle;
  font-size: 14px;
}

//获取验证码按钮
.linkMobileCode {
  padding: 0px;
  width: 80px;
  height: 28px;
  line-height: 28px;
  font-size: 12px;
  color: #C8161D;
  border: 1px solid #C8161D;
  background-color: white;
}

//提交按钮
.mgtIdNumber_process_btn {
  width: 95%;
  font-size: 20px;
}

//修改默认按钮失效时背景颜色
.weui-btn_disabled.weui-btn_primary {
  background-color: #cfcfcf;
}
</style>
